import React, { useState, useEffect } from 'react';
import { Input, Card, List, Tag, Space, Typography } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { searchProducts, getAllProducts } from '../services/api';

const { Search } = Input;
const { Text, Title } = Typography;

const ProductSearch = () => {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    loadAllProducts();
  }, []);

  const loadAllProducts = async () => {
    setLoading(true);
    try {
      const data = await getAllProducts();
      setProducts(data);
    } catch (error) {
      console.error('加载商品失败:', error);
    }
    setLoading(false);
  };

  const handleSearch = async (keyword) => {
    if (!keyword.trim()) {
      loadAllProducts();
      return;
    }
    
    setLoading(true);
    try {
      const data = await searchProducts(keyword);
      setProducts(data);
    } catch (error) {
      console.error('搜索商品失败:', error);
    }
    setLoading(false);
  };

  return (
    <div style={{ padding: '24px' }}>
      <Space direction="vertical" size="large" style={{ width: '100%' }}>
        <Title level={2}>商品搜索</Title>
        
        <Search
          placeholder="输入关键词搜索商品..."
          enterButton={<SearchOutlined />}
          size="large"
          onSearch={handleSearch}
          style={{ maxWidth: 600 }}
        />

        <List
          grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}
          dataSource={products}
          loading={loading}
          renderItem={(product) => (
            <List.Item>
              <Card
                hoverable
                cover={
                  <img
                    alt={product.title}
                    src={product.mainImage}
                    style={{ height: 200, objectFit: 'cover' }}
                  />
                }
              >
                <Card.Meta
                  title={product.title}
                  description={
                    <>
                      <Text type="danger" strong>¥{product.price}</Text>
                      <br />
                      <Text type="secondary">{product.description}</Text>
                      <br />
                      <Space wrap>
                        {product.tags?.map((tag, index) => (
                          <Tag key={index} color="blue">{tag}</Tag>
                        ))}
                      </Space>
                      <br />
                      <Text type="secondary">
                        品牌: {product.brand} | 类目: {product.category}
                      </Text>
                      <br />
                      <Text type="secondary">
                        库存: {product.stock} | 销量: {product.sales}
                      </Text>
                    </>
                  }
                />
              </Card>
            </List.Item>
          )}
        />
      </Space>
    </div>
  );
};

export default ProductSearch; 